<template>
    <div
        @click="handleBgClick"
        class="light-window__bg"
        :style="{
            zIndex,
            backgroundColor: bgColor,
            '--b-radius': s.borderRadius,
            height: innerHeightPx,
        }"
    >
        <div
            class="main"
            ref="main"
            @click.stop
            :class="{
                not_draged: !draged,
            }"
            :style="{
                height: s.height,
                width: s.width,
                borderRadius: s.borderRadius,
                'max-width': s.maxWidth,
                'max-height': s.maxHeight,
                'min-width': s.minWidth,
                'min-height': s.minHeight,
            }"
        >
            <div
                class="window_title"
                ref="drag"
                @mousedown="dragStart"
                @touchstart="mobileTouch"
            >
                <img
                    @mousedown.stop
                    v-if="icon"
                    class="t_icon"
                    :src="icon"
                    alt=""
                />
                <span :title="title">{{ title }}</span>
                <div
                    v-if="showCloseIcon"
                    @mousedown.stop
                    @click="closeModal"
                    class="icon"
                    title="关闭"
                >
                    <svg
                        viewBox="0 0 1024 1024"
                        version="1.1"
                        xmlns="http://www.w3.org/2000/svg"
                        xmlns:xlink="http://www.w3.org/1999/xlink"
                        width="24"
                        height="24"
                    >
                        <path
                            d="M576 512l277.333333 277.333333-64 64-277.333333-277.333333L234.666667 853.333333 170.666667 789.333333l277.333333-277.333333L170.666667 234.666667 234.666667 170.666667l277.333333 277.333333L789.333333 170.666667 853.333333 234.666667 576 512z"
                            fill="#606266"
                        ></path>
                    </svg>
                </div>
            </div>
            <slot></slot>
        </div>
    </div>
</template>

<script>
/**
 * 判断传入参是否为数字
 * @param {Number|String} n 数字
 * @returns {Boolean}
 * 返回    true 是数字   false 不是数字
 */
const isNum = (n) => {
    return ["number", "string"].includes(typeof n) && !isNaN(n);
};
/**
 * 设置body的overflow值 =>  true 可滚动 false 不可滚动
 * @param {Boolean} scrollable 是否可滚动
 */
const setBodyScrollable=(scrollable)=>document.body.style.overflow=scrollable?'auto':'hidden';
export default {
    props: {
        /**
         * 禁止body滚动
         */
        disableBodyScroll:{
            type:Boolean,
            default:true,
        },
        /**
         * 背景颜色
         */
        bgColor: {
            type: String,
            default: "rgba(0, 0, 0, 0.3)",
        },
        /**
         * 窗口标题
         */
        title: {
            type: String,
            default: "",
        },
        /**
         * 窗口高度
         */
        height: {
            type: [String, Number],
            default: "400px",
        },
        /**
         * 窗口宽度
         */
        width: {
            type: [String, Number],
            default: "600px",
        },
        /**
         * 窗口最大高度
         */
        maxHeight: {
            type: [String, Number],
            default: "unset",
        },
        /**
         * 窗口最大宽度
         */
        minWidth: {
            type: [String, Number],
            default: "unset",
        },
        /**
         * 窗口最大高度
         */
        minHeight: {
            type: [String, Number],
            default: "unset",
        },
        /**
         * 窗口最大宽度
         */
        maxWidth: {
            type: [String, Number],
            default: "unset",
        },
        /**
         * 窗口圆角
         */
        borderRadius: {
            type: [String, Number],
            default: "none",
        },
        /**
         * 窗口图标
         */
        icon: {
            type: [String, Boolean],
            default: "./light-win/logo.png",
        },
        /**
         * 背景点击是否关闭窗口(开关)
         */
        clickBgClose: {
            type: Boolean,
            default: false,
        },
        /**
         * 是否显示关闭图标(开关)
         */
        showCloseIcon: {
            type: Boolean,
            default: true,
        },
    },
    data() {
        return {
            s: {
                width: "600px",
                height: "400px",
                borderRadius: "none",
                maxWidth: "unset",
                maxHeight: "unset",
                minWidth: "unset",
                minHeight: "unset",
            },
            zIndex: 2000, //2000是默认值
            draged: false,
        };
    },
    computed: {
        innerHeightPx() {
            return window.innerHeight + "px";
        },
    },
    methods: {
        /**
         * 移动端兼容处理
         */
        mobileTouch(e) {
            let e0 = e.targetTouches[0];
            this.dragStart(e0, true);
        },
        /**
         * 关闭弹窗
         */
        closeModal() {
            setBodyScrollable(true);
            this.$emit("input", false);
        },
        /**
         * 处理背景点击事件
         */
        handleBgClick() {
            this.clickBgClose && this.closeModal();
        },
        /**
         * 动态生成最大zIndex遮罩层
         */
        getMaxZindex() {
            this.$nextTick(() => {
                let winEls = document.querySelectorAll(".light-window__bg");
                let arr;
                let len = winEls.length;
                if (len > 1) {
                    arr = [];
                    for (let index = 0; index < len; index++) {
                        const el = winEls[index];
                        arr.push(el.style.zIndex);
                    }
                    this.zIndex = Math.max(...arr) + 1;
                } else {
                    this.zIndex = 2000;
                }
            });
        },
        /**
         * 拖拽
         */
        dragStart(e, isMob) {
            let { main: mDom, drag: dDom } = this.$refs;
            let { x, y } = dDom.getBoundingClientRect();
            let offsetY = e.clientY - y;
            let offsetX = e.clientX - x;
            const _setPosition=(e)=>{
                 this.draged = true;
                 mDom.style.top = e.clientY - offsetY + "px";
                 mDom.style.left = e.clientX - offsetX + "px";
            }
            if (!isMob) {
                document.onmousemove = (e) => {
                   _setPosition(e);
                };
                document.onmouseup = () => {
                    document.onmousemove = null;
                };
            } else {
                document.ontouchmove = (e) => {
                    e = e.targetTouches[0];
                    _setPosition(e)
                };
                document.ontouchuend = () => {
                    document.ontouchmove = null;
                };
            }
        },
        /**
         * 初始化弹框属性
         */
        initWin() {
            let sProperties = Object.keys(this.s);
            let len = sProperties.length;
            for (let index = 0; index < len; index++) {
                const p = sProperties[index];
                this.s[p] = this[p] + (isNum(this[p]) ? "px" : "");
            }
        },
    },
    created() {
        this.initWin();
        this.getMaxZindex();
    },
    mounted() {
        /**
         * 将组件实例挂载至body下
         */
        this.$nextTick(() => {
            setBodyScrollable(false);
            if (document.body.append) {
                document.body.append(this.$el);
            } else {
                document.body.appendChild(this.$el);
            }
        });
    },
};
</script>

<style scoped>
@import url("./index.min.css");
</style>
